<template>
	<view
		class="u-no-network"
		v-if="!isConnected"
		:style="{'z-index': uZIndex}"
		@touchmove.stop.prevent="() => {}"
	>
		<view class="u-inner">
			<image
				class="u-error-icon"
				:src="image"
				mode="widthFix"
			/>
			<view class="u-tips">
				{{tips}}
			</view>
			<!-- 只有APP平台，才能跳转设置页，因为需要调用plus环境 -->
			<!-- #ifdef APP-PLUS -->
			<view class="u-to-setting">
				请检查网络，或前往<text
					class="u-setting-btn"
					@tap="openSettings"
				>
					设置
				</text>
			</view>
			<!-- #endif -->
			<view
				class="u-retry"
				:hover-stay-time="150"
				@tap="retry"
				hover-class="u-retry-hover"
			>
				重试
			</view>
		</view>
	</view>
</template>

<script>
/**
	 * noNetwork 无网络提示
	 * @description 该组件无需任何配置，引入即可，内部自动处理所有功能和事件。
	 * @tutorial https://www.uviewui.com/components/noNetwork.html
	 * @property {String} tips 没有网络时的提示语（默认哎呀，网络信号丢失）
	 * @property {String Number} zIndex 组件的z-index值（默认1080）
	 * @property {String} image 无网络的图片提示，可用的src地址或base64图片
	 * @event {Function} retry 用户点击页面的"重试"按钮时触发
	 * @example <u-no-network></u-no-network>
	 */
export default {
  name: 'u-no-network',
  props: {
    // 页面文字提示
    tips: {
      type: String,
      default: '哎呀，网络信号丢失'
    },
    // 一个z-index值，用于设置没有网络这个组件的层次，因为页面可能会有其他定位的元素层级过高，导致此组件被覆盖
    zIndex: {
      type: [Number, String],
      default: ''
    },
    // image 没有网络的图片提示
    image: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isConnected: true, // 是否有网络连接
      networkType: 'none', // 网络类型
    }
  },
  computed: {
    uZIndex() {
      return this.zIndex ? this.zIndex : this.$u.zIndex.noNetwork
    }
  },
  mounted() {
    this.isIOS = (uni.getSystemInfoSync().platform === 'ios')
    uni.onNetworkStatusChange((res) => {
      this.isConnected = res.isConnected
      this.networkType = res.networkType
    })
    uni.getNetworkType({
      success: (res) => {
        this.networkType = res.networkType
        if (res.networkType == 'none') {
          this.isConnected = false
        } else {
          this.isConnected = true
        }
      }
    })
  },
  methods: {
    retry() {
      // 重新检查网络
      uni.getNetworkType({
        success: (res) => {
          this.networkType = res.networkType
          if (res.networkType == 'none') {
            uni.showToast({
              title: '无网络连接',
              icon: 'none',
              position: 'top'
            })
            this.isConnected = false
          } else {
            uni.showToast({
              title: '网络已连接',
              icon: 'none',
              position: 'top'
            })
            this.isConnected = true
          }
        }
      })
      this.$emit('retry')
    },
    async openSettings() {
      if (this.networkType == 'none') {
        this.openSystemSettings()
        return
      }
    },
    openAppSettings() {
      this.gotoAppSetting()
    },
    openSystemSettings() {
      // 以下方法来自5+范畴，如需深究，请自行查阅相关文档
      // https://ask.dcloud.net.cn/docs/
      if (this.isIOS) {
        this.gotoiOSSetting()
      } else {
        this.gotoAndroidSetting()
      }
    },
    network() {
      let result = null

      const cellularData = plus.ios.newObject('CTCellularData')

      const state = cellularData.plusGetAttribute('restrictedState')

      if (state == 0) {
        result = null
      } else if (state == 2) {
        result = 1
      } else if (state == 1) {
        result = 2
      }
      plus.ios.deleteObject(cellularData)
      return result
    },
    gotoAppSetting() {
      if (this.isIOS) {
        const UIApplication = plus.ios.import('UIApplication')

        const application2 = UIApplication.sharedApplication()

        const NSURL2 = plus.ios.import('NSURL')

        const setting2 = NSURL2.URLWithString('app-settings:')

        application2.openURL(setting2)
        plus.ios.deleteObject(setting2)
        plus.ios.deleteObject(NSURL2)
        plus.ios.deleteObject(application2)
      } else {
        const Intent = plus.android.importClass('android.content.Intent')

        const Settings = plus.android.importClass('android.provider.Settings')

        const Uri = plus.android.importClass('android.net.Uri')

        const mainActivity = plus.android.runtimeMainActivity()

        const intent = new Intent()

        intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
        const uri = Uri.fromParts('package', mainActivity.getPackageName(), null)

        intent.setData(uri)
        mainActivity.startActivity(intent)
      }
    },
    gotoiOSSetting() {
      const UIApplication = plus.ios.import('UIApplication')

      const application2 = UIApplication.sharedApplication()

      const NSURL2 = plus.ios.import('NSURL')

      const setting2 = NSURL2.URLWithString('App-prefs:root=General')

      application2.openURL(setting2)
      plus.ios.deleteObject(setting2)
      plus.ios.deleteObject(NSURL2)
      plus.ios.deleteObject(application2)
    },
    gotoAndroidSetting() {
      const Intent = plus.android.importClass('android.content.Intent')

      const Settings = plus.android.importClass('android.provider.Settings')

      const mainActivity = plus.android.runtimeMainActivity()

      const intent = new Intent(Settings.ACTION_SETTINGS)

      mainActivity.startActivity(intent)
    }
  }
}
</script>

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";

	.u-no-network {
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.u-inner {
		height: 100vh;
		@include vue-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: -15%;
	}

	.u-tips {
		color: $u-tips-color;
		font-size: 28rpx;
		padding: 30rpx 0;
	}

	.u-error-icon {
		width: 300rpx;
	}

	.u-to-setting {
		color: $u-light-color;
		font-size: 26rpx;
	}

	.u-setting-btn {
		font-size: 26rpx;
		color: $u-type-primary;
	}

	.u-retry {
		margin-top: 30rpx;
		border: 1px solid $u-tips-color;
		color: $u-tips-color;
		font-size: 28rpx;
		padding: 6rpx 30rpx;
		border-radius: 3px;
	}

	.u-retry-hover {
		color: #fff;
		background-color: $u-tips-color;
	}
</style>
